<script setup lang="ts">
import { ref, reactive } from 'vue'
import store from '@/store'
import draggable from 'vuedraggable'
import { numberToChinese } from '@/utils/tools'
import IconFont from '@/components/IconFont/index.vue'
import VisibleRender from '@/components/VisibleRender.vue'

const modal = reactive({
  title: '排序',
  type: 'detail',
  loading: false,
  open: false
})

const formData = ref()

const init = (item) => {
  console.log(item)
  formData.value = item
  modal.type = 'detail'
  modal.open = true
}

const moveOptions = (list, item) => {
  console.log('拖拽结束')

  modal.type = 'modify'
}

const confirm = () => {
  modal.loading = true
  console.log(formData.value)
  emit('onConfirm', {
    data: formData.value,
    success: () => {
      console.log('success')
      modal.loading = false
      modal.open = false
    },
    fail: () => {
      console.log('fail')
      modal.loading = false
    }
  })
}

const emit = defineEmits(['onConfirm'])

defineExpose({
  init
})
</script>

<template>
  <a-modal
    width="720px"
    :bodyStyle="store.userStore.bodyStyle"
    v-model:open="modal.open"
    :title="modal.title"
    ok-text="确认"
    :maskClosable="false"
  >
    <div class="modal-content" style="min-height: 400px">
      <h2>{{ formData?.questionnaireName }}</h2>
      <template v-for="(module, index) in formData?.content" :key="index">
        <h3>{{ numberToChinese(index + 1) + '、' + module.name }}</h3>
        <draggable
          :list="module.list"
          :handle="'.icon-move'"
          itemKey="id"
          animation="300"
          @end="moveOptions($event, module)"
        >
          <template #item="{ element: subitem, index: i }">
            <a-row class="row" :key="i">
              <a-col :span="23">
                <span
                  >{{ i + 1 + '. ' + subitem.name
                  }}<span>{{
                    subitem.type.includes('单选')
                      ? '（单选）'
                      : subitem.type.includes('多选')
                        ? '（多选）'
                        : ''
                  }}</span></span
                >
              </a-col>
              <a-col class="ft" :span="1">
                <icon-font class="icon-move" type="icon-yidong" />
              </a-col>
            </a-row>
          </template>
        </draggable>
      </template>
    </div>
    <template #footer>
      <a-button
        v-if="modal.type === 'detail'"
        key="submit"
        type="primary"
        @click="modal.open = false"
        >确认</a-button
      >
      <template v-else>
        <a-button @click="modal.open = false">取消</a-button>
        <a-button key="submit" type="primary" :loading="modal.loading" @click="confirm"
          >提交</a-button
        >
      </template>
    </template>
  </a-modal>
</template>

<style scoped lang="less">
.row {
  line-height: 32px;
  .ft {
    height: 47px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    .icon-move {
      color: #4e5969;
      font-size: 24px;
      line-height: 32px;
      cursor: move;
    }
  }
}
</style>
